<template>
  <div class="alarmHanding-root runningAnalysis-root">
    <div class="box">
      <alarmTrend/>
    </div>
    <div class="box">
      <alarmAmount/>
    </div>
    <div class="box">
      <alarmLevel/>
    </div>
    <div class="box">
      <alarmType/>
    </div>
    <div class="box-100">
      <alarmTable/>
    </div>
  </div>
</template>

<script>
  import alarmTrend from './components/alarmTrend.vue';
  import alarmAmount from './components/alarmAmount.vue';
  import alarmType from './components/alarmTypes.vue';
  import alarmLevel from './components/alarmLevel.vue';
  import alarmTable from './components/alarmTable.vue';

  export default {
    name: "alarmHanding",
    components: {
      alarmTrend,alarmAmount,alarmType,alarmLevel,alarmTable,
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss" scoped>
  @import "../runningAnalysis.scss";

  .alarmHanding-root {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .box-100{
      width: 100%;
      padding: 8px 12px;
    }
    .box{
      width: 50%;
      padding: 8px 12px;
      margin-bottom: 20px;
    }
  }
</style>
